<template>
  <div class="page-login">
    <div class="login-form">
      <div class="login-photo">
        <img src="@assets/images/login_university.png"/>
        <div class="welcome">
          <p class="title">Hi~</p>
          <p class="tip m-t-10">欢迎来到门道数据查询系统</p>
        </div>
      </div>

      <div class="login-email">
        <div class="form-logo">
          <img src="@assets/images/logo.png" />
        </div>
        <el-form label-position="right" label-width="0" :model="loginObj">
          <el-form-item label="">
            <el-input v-model="loginObj.username" type="text" placeholder="请输入用户名" clearable></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="loginObj.password" type="password" placeholder="请输入密码" clearable></el-input>
          </el-form-item>
        </el-form>

        <div class="m-t-20 login-btn">
          <el-button type="primary" @click="login">登 录</el-button>
        </div>
        <div class="tip-box">
          <el-button type="text" @click="goUse">使用说明<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import API from '@assets/js/api.js'

  export default {
    name: "login",
    data() {
      return {
        pageLoading: false,
        loginObj: {
          username: "",
          password: ""
        },
        loginSession: {},
        linkUrl: "https://www.ixigua.com/i6846697756673704455/"
      }
    },
    computed: {},
    methods: {
      // 登录逻辑
      login() {
        if (this.loginObj.username === '') {
          this.$message.error('请填写用户名');
          return;
        }
        if (this.loginObj.password === '') {
          this.$message.error('请填写用密码');
          return;
        }
        this.loginUtil();
      },
      loginUtil() {
        this.axios.post(API.login, this.loginObj).then(res => {
          if (res.data.code === 1) {
            this.loginSession = {
              expireDays: 1000 * 60 * 60 * 24 * 15,
              name: res.data.data.name
            };
            sessionStorage.setItem('token', res.data.data.token); // 已登录
            // 判断是否选择文理科跳转不同界面
            sessionStorage.setItem('userInfo', JSON.stringify(res.data.data))
            if(!res.data.data.type) { // 跳转院校界面
              this.$router.push({
                path: '/chooseSubject',
              });
            } else { // 跳转选择文理科界面
              this.$router.push({
                path: '/schoolInfo',
              });
            }
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(err => {
          this.$message.error(err);
        })
      },

      goUse() {
        window.open(this.linkUrl)
      }

    }
  }
</script>

<style lang="stylus">
  .page-login
    .el-button
      width 100%
</style>
<style scoped lang="stylus">
  $theme-color = #E65A1E

  .page-login
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, rgba(230, 90, 30, 1) 0%, rgba(230, 90, 30, 0.6) 100%);

    .login-header
      width: 100%;
      height: 82px;
      position: absolute;
      top: 0;
      background-color: $theme-color;

      .login-header-con
        width: 1190px;
        height: 82px;
        margin: 0 auto;
        text-align: center;

        img
          width: 95px;
          margin-top: -20px;
          display: inline-block;
          vertical-align: middle;

        .login-title
          height: 82px;
          line-height: 82px;
          margin-left: 20px;
          color: #fff;
          font-size: 27px;
          font-weight: 700;
          display: inline-block;


    .login-form
      position: absolute;
      top: 50%;
      left: 50%;
      transform translate(-50%, -50%)
      display flex
      width: 926px;
      height: 484px;
      text-align: center;
      /*box-shadow: 0px 30px 60px 0px rgba(228, 231, 241, 1);*/
      box-shadow: 0px 10px 20px 0px $theme-color;
      border-radius: 10px;
      background: #fff
      overflow hidden

      .login-photo
        position: relative
        width: 536px;
        img
          width 100%
        .welcome
          position: absolute
          width: 100%
          left: 0
          top: 0
          padding: 40px
          text-align left
          color: $theme-color
          .title
            font-size 30px
          .tip
            font-size 20px

      .login-email
        flex 1
        width: 374px;
        height: 484px;
        padding: 40px;

        .form-logo
          width: 84px;
          height: 84px;
          margin: 20px auto 40px auto;
          line-height: 84px;
          border-radius: 50%;
          background: $theme-color
          img
            width: 80%;
            margin-top: 26px


        .login-btn
          width: 100%;
          margin-top: 30px;
          text-align: center;

        .tip-box
          padding 10px 0
          text-align right

    .footer
      width: 100%;
      height: 60px;
      line-height: 60px;
      margin: 0 auto;
      position: absolute;
      bottom: 0;
      text-align: center;
      background: $theme-color;
      font-size: 12px;
      color: #fff;
</style>